<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.8: http://docutils.sourceforge.net/" />
<title>Simple and complex lists</title>
<style type="text/css">

/*
:Author: David Goodger (goodger@python.org)
:Id: $Id$
:Copyright: This stylesheet has been placed in the public domain.

Default cascading style sheet for the HTML output of Docutils.

See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/

/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
  border: 0 }

table.borderless td, table.borderless th {
  /* Override padding for "table.docutils td" with "! important".
     The right padding separates the table cells. */
  padding: 0 0.5em 0 0 ! important }

.first {
  /* Override more specific margin styles with "! important". */
  margin-top: 0 ! important }

.last, .with-subtitle {
  margin-bottom: 0 ! important }

.hidden {
  display: none }

a.toc-backref {
  text-decoration: none ;
  color: black }

blockquote.epigraph {
  margin: 2em 5em ; }

dl.docutils dd {
  margin-bottom: 0.5em }

object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
  overflow: hidden;
}

/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold }
*/

div.abstract {
  margin: 2em 5em }

div.abstract p.topic-title {
  font-weight: bold ;
  text-align: center }

div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
  margin: 2em ;
  border: medium outset ;
  padding: 1em }

div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
  font-weight: bold ;
  font-family: sans-serif }

div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title {
  color: red ;
  font-weight: bold ;
  font-family: sans-serif }

/* Uncomment (and remove this text!) to get reduced vertical space in
   compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
  margin-bottom: 0.5em }

div.compound .compound-last, div.compound .compound-middle {
  margin-top: 0.5em }
*/

div.dedication {
  margin: 2em 5em ;
  text-align: center ;
  font-style: italic }

div.dedication p.topic-title {
  font-weight: bold ;
  font-style: normal }

div.figure {
  margin-left: 2em ;
  margin-right: 2em }

div.footer, div.header {
  clear: both;
  font-size: smaller }

div.line-block {
  display: block ;
  margin-top: 1em ;
  margin-bottom: 1em }

div.line-block div.line-block {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: 1.5em }

div.sidebar {
  margin: 0 0 0.5em 1em ;
  border: medium outset ;
  padding: 1em ;
  background-color: #ffffee ;
  width: 40% ;
  float: right ;
  clear: right }

div.sidebar p.rubric {
  font-family: sans-serif ;
  font-size: medium }

div.system-messages {
  margin: 5em }

div.system-messages h1 {
  color: red }

div.system-message {
  border: medium outset ;
  padding: 1em }

div.system-message p.system-message-title {
  color: red ;
  font-weight: bold }

div.topic {
  margin: 2em }

h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
  margin-top: 0.4em }

h1.title {
  text-align: center }

h2.subtitle {
  text-align: center }

hr.docutils {
  width: 75% }

img.align-left, .figure.align-left, object.align-left {
  clear: left ;
  float: left ;
  margin-right: 1em }

img.align-right, .figure.align-right, object.align-right {
  clear: right ;
  float: right ;
  margin-left: 1em }

img.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  text-align: left }

.align-center {
  clear: both ;
  text-align: center }

.align-right {
  text-align: right }

/* reset inner alignment in figures */
div.align-right {
  text-align: left }

/* div.align-center * { */
/*   text-align: left } */

ol.simple, ul.simple {
  margin-bottom: 1em }

ol.arabic {
  list-style: decimal }

ol.loweralpha {
  list-style: lower-alpha }

ol.upperalpha {
  list-style: upper-alpha }

ol.lowerroman {
  list-style: lower-roman }

ol.upperroman {
  list-style: upper-roman }

p.attribution {
  text-align: right ;
  margin-left: 50% }

p.caption {
  font-style: italic }

p.credits {
  font-style: italic ;
  font-size: smaller }

p.label {
  white-space: nowrap }

p.rubric {
  font-weight: bold ;
  font-size: larger ;
  color: maroon ;
  text-align: center }

p.sidebar-title {
  font-family: sans-serif ;
  font-weight: bold ;
  font-size: larger }

p.sidebar-subtitle {
  font-family: sans-serif ;
  font-weight: bold }

p.topic-title {
  font-weight: bold }

pre.address {
  margin-bottom: 0 ;
  margin-top: 0 ;
  font: inherit }

pre.literal-block, pre.doctest-block {
  margin-left: 2em ;
  margin-right: 2em }

span.classifier {
  font-family: sans-serif ;
  font-style: oblique }

span.classifier-delimiter {
  font-family: sans-serif ;
  font-weight: bold }

span.interpreted {
  font-family: sans-serif }

span.option {
  white-space: nowrap }

span.pre {
  white-space: pre }

span.problematic {
  color: red }

span.section-subtitle {
  /* font-size relative to parent (h1..h6 element) */
  font-size: 80% }

table.citation {
  border-left: solid 1px gray;
  margin-left: 1px }

table.docinfo {
  margin: 2em 4em }

table.docutils {
  margin-top: 0.5em ;
  margin-bottom: 0.5em }

table.footnote {
  border-left: solid 1px black;
  margin-left: 1px }

table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
  padding-left: 0.5em ;
  padding-right: 0.5em ;
  vertical-align: top }

table.docutils th.field-name, table.docinfo th.docinfo-name {
  font-weight: bold ;
  text-align: left ;
  white-space: nowrap ;
  padding-left: 0 }

h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
  font-size: 100% }

ul.auto-toc {
  list-style-type: none }

</style>
<style type="text/css">

/* html4css2.css: Cascading style sheet for Docutils' html4strict writer.   */
/*                                                                          */
/* :Author: Günter Milde                                                    */
/* :Copyright: © 2009 Günter Milde.                                         */
/*             Released  without warranties or conditions of any kind       */
/*             under the terms of the Apache License, Version 2.0           */
/*          http://www.apache.org/licenses/LICENSE-2.0                      */
/*                                                                          */
/* This stylesheet supplements the Docutils standard style 'html4css1.css'. */
/* It uses CSS 2.1 elements (supported by up-to-date versions of popular    */
/* browsers).                                                               */

/* General rules */
/* ============= */

body {
  padding: 0 5%;
  margin: 8px 0;
  line-height:1.3;
  /* http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  recommends "line-spacing that’s at least 140% of your text size" */
}

/* avoid long lines --> better reading */
/* OTOH: lines should not be too short because of missing hyphenation, */
div.document {
  max-width: 45em;
  margin: auto;
}

/* separate items except for compact lists */
dl > dd {
  margin-bottom: 1em;
}
.compact li, .compact p, .compact ul, .compact ol
dl.simple  > dd, .simple  li, .simple  p, .simple  ul, .simple  ol {
  margin-top: 0;
  margin-bottom: 0;
/*   background: magenta; */
}
dl.simple, dl.compact, dl.simple > dd, dl.compact > dd {
  margin-top: 0;
  margin-bottom: 0;
/*   background: lightgreen; */
}

/* space around paragraphs */
dl > dd p:first-child {
  margin: 0;
}

/* Sidebar */
/* ------- */

div.sidebar {
  margin-right: -5%;
}

/* Special definition lists */
/* ======================== */

/* bold definition term on the same line as the label */
dl.field-list > dt, dl.option-list > dt, dl.docinfo > dt,
dl.footnote > dt, dl.citation > dt, dl.description > dt {
  clear: left;
  float: left;
  margin: 0;
  padding: 0;
  padding-right: 0.5em;
  font-weight: bold;
}
/* except for these */
dl.option-list > dt, dl.footnote > dt {
  font-weight: normal;
}



/* Field Lists */
/* ----------- */

/* field names followed by a colon */
dl.field-list > dt:after, dl.docinfo > dt:after {
  content: ":";
}

/* Offset for field content (corresponds to the --field-name-limit option) */
dl.field-list > dd {
  margin-left:  9em; /* ca. 14 chars in the test examples */
  padding-left: 0.5em;
}

/* start field-body on a new line after long field names */
dl.field-list > dd p {
  width: 100%;
/*   display: inline-block; */
/*   background: yellow; */
}

dl.field-list > dd > p:first-child,
/* dl.field-list > dd > ol:first-child, */
/* dl.field-list > dd > ul:first-child, */
dl.field-list > dd > dl:first-child {
  display: inline-block;
}

/* field-list variants:: */

/* example for custom field-name width */
dl.field-list.narrow > dd {
  margin-left: 5em;
}

/* start field-body on same line after long field names */
dl.field-list.run-in > dd p {
  display: block;
}

/* wrap or truncate long field names */
dl.field-list.fix-labelwidth > dt {
  width: 8em; /* set to dl.field-list > dd margin-left - padding-left */
  overflow: hidden;
}
dl.field-list.fix-labelwidth > dd:after {
  /* a "stopper" to prevent next dd floating up too far */
  content: '';
  display: block;
  clear: left;
}

/* docinfo */

dl.docinfo > dd {
  margin-left: 8em;
/*   margin-bottom: 0.5em; */
}

/* pretty-print date and author */
dl.docinfo dt.author:first-child,
dt.date:first-child + dd.date + dt.author  {
  display: none;
}
dl.docinfo dt.author:first-child + dd,
dt.date:first-child + dd.date + dt.author + dd {
  margin-left: 0;
  padding: 0 5%;
  font-size: larger;
  text-align: center;
  padding-bottom: 1em;
}

dl.docinfo dt.date:first-child,
dt.author:first-child + dd.author + dt.date {
  display: none;
}
dl.docinfo dt.date:first-child + dd,
dt.author:first-child + dd.author + dt.date + dd {
  margin-left: 0;
  padding: 0 5%;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1em;
}

/* option list */

dl.option-list {
  margin-left: 1em;
  padding-left: 0;
}

dl.option-list > dd {
  margin-left: 8em;
  /* margin-bottom: 0.5em; */
}

/* start description on a new line after long options */
dl.option-list > dd p {
  width: 100%;
  display: inline-block;
}

/* footnotes */

a.footnote-reference, a.fn-backref {
  text-decoration: inherit; /* do not underline footnote links */
}

dl.footnote {
  /* line on the left */
  padding-left: 1ex;
  border-left: solid;
  border-left-width: thin;
  /* border-color: black; */
}


/*
Ordered List (Enumeration)
--------------------------

Use counters to replace the deprecated start attribute. Make sure the
resulting list resembles the list-style 'outside' with a hanging indent.
*/

/* New ordered list: reset counter, suppress the default label */
ol {
  counter-reset: item;
  list-style-type: none  ! important;
}

/* Set the negative indent of the list label as feature of the list item */
ol > li {
  text-indent: -40px; /* Mozillas default indent */
}

/* Label */
ol > li:before {
  /* increment and typeset counter(s), */
  counter-increment: item;
  content: counter(item) ".";
  /* display next to the content (aligned top-right), */
  display: inline-block;
  text-align: right;
  vertical-align: top;
  /* sum must match ol>li {text-indent:} (40px is Mozillas default) */
  width: 35px;
  padding-right: 5px;
/*   background: yellow; */
}

/* objects nested in an ol */
ol > li > p,
ol > li > ol,
ol > li > ul,
ol > li > dl {
  text-indent: 0;
  margin-top: 0;
  /* background: lightgreen; */
}

/* The list item's first line starts next to the label, without indent */
ol > li > p:first-child,
ol > li > ol:first-child,
ol > li > ul:first-child,
ol > li > dl:first-child {
  display: inline-block;
  /* background: lightblue; */
}

/* default separator variants */
ol.loweralpha > li:before {
  content: counter(item, lower-alpha) ")";
}
ol.upperalpha  > li:before {
  content: counter(item, upper-alpha) ".";
}
ol.lowerroman  > li:before {
  content: "(" counter(item, lower-roman) ")";
}
ol.upperroman  > li:before {
  content: counter(item, upper-roman) ")";
}
/* nested counters (1, 1.1, 1.1.1, etc) */
/* nested enumerated lists "inherit" the class attribute, other lists not */
ol.nested > li:before, ol.nested  ol > li:before {
  content: counters(item, ".") " ";
}

/* TODO: prefix, suffix? */

/* smaller font for super- and subscripts */
/* sub, sup {font-size: 70%;} */ /* Mozilla default is `smaller` */


/* Table of Contents */

/* don't indent like a blockquote */
div.topic.contents {
  margin: 0;
}
/* div.topic.contents ul { */
/*   list-style: none;	   */
/*   }			   */

/* Tables */
/* ------ */

/* borders for "normal" tables */
table {
  margin-top: 0.5em ;
  margin-bottom: 0.5em;
  border-style: outset;
  border-width: thin;
  /* border-collapse: collapse; */
}

td, th {
  border-style: inset;
  border-width: thin;
  /* text-align: left; */
  padding: 0 1ex;
}

/* no borders for "borderless" tables */
table.borderless, table.borderless * {
  border-style: none;
}

/* "booktabs" style (no vertical lines) */
table.booktabs {
  border: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-collapse: collapse;
}

table.booktabs * {
  border: 0;
}
table.booktabs th {
  border-bottom: thin solid;
}

table > caption {
  text-align: left;
/*   padding: 2em 0 1em 0; */
}

/* numbered tables and figures*/
body {
  counter-reset: table;
/*   counter-reset: figure; */
}

table.numbered > caption:before {
  counter-increment: table;
  content: "Table " counter(table) ": ";
  font-weight: bold;
}


/* whitespace and line-wrapping in inline literals
   -----------------------------------------------
*/
/* possible values: normal, nowrap, pre, pre-wrap, pre-line */
tt.docutils.literal {
  white-space: pre-wrap;
}

</style>
</head>
<body>
<div class="document" id="simple-and-complex-lists">
<h1 class="title">Simple and complex lists</h1>

<p>The <cite>html4css1.HTMLTranslator</cite> docstring says:</p>
<blockquote>
<p>This HTML writer has been optimized to produce visually compact
lists (less vertical whitespace).  HTML's mixed content models
allow list items to contain &quot;&lt;li&gt;&lt;p&gt;body elements&lt;/p&gt;&lt;/li&gt;&quot; or
&quot;&lt;li&gt;just text&lt;/li&gt;&quot; or even &quot;&lt;li&gt;text&lt;p&gt;and body
elements&lt;/p&gt;combined&lt;/li&gt;&quot;, each with different effects.  It would
be best to stick with strict body elements in list items, but they
affect vertical spacing in browsers (although they really
shouldn't).</p>
<p>Here is an outline of the optimization:</p>
<ul>
<li><p class="first">Check for and omit &lt;p&gt; tags in &quot;simple&quot; lists: list items
contain either a single paragraph, a nested simple list, or a
paragraph followed by a nested simple list.  This means that
this list can be compact:</p>
<blockquote>
<ul class="simple">
<li>Item 1.</li>
<li>Item 2.</li>
</ul>
</blockquote>
<p>But this list cannot be compact:</p>
<blockquote>
<ul>
<li><p class="first">Item 1.</p>
<p>This second paragraph forces space between list items.</p>
</li>
<li><p class="first">Item 2.</p>
</li>
</ul>
</blockquote>
</li>
<li><p class="first">In non-list contexts, omit &lt;p&gt; tags on a paragraph if that
paragraph is the only child of its parent (footnotes &amp; citations
are allowed a label first).</p>
</li>
<li><p class="first">Regardless of the above, in definitions, table cells, field bodies,
option descriptions, and list items, mark the first child with
'class=&quot;first&quot;' and the last child with 'class=&quot;last&quot;'.  The stylesheet
sets the margins (top &amp; bottom respectively) to 0 for these elements.</p>
</li>
</ul>
<p>The <tt class="docutils literal">no_compact_lists</tt> setting (<tt class="docutils literal">--no-compact-lists</tt> command-line
option) disables list whitespace optimization.</p>
</blockquote>
<p>In <cite>html4_strict</cite>, the algorithm to determine if a list is &quot;simple&quot;
enough to be compacted includes field lists (in addition to ordered
lists and unordered lists).</p>
<style type="text/css"><!--
dl.field-list > dd { margin-left:  40px;
                     padding-left: 0;
                     /* background: yellow; */
                   }
--></style><div class="section" id="simple-lists">
<h1>Simple lists</h1>
<ul class="simple">
<li>This list is simple</li>
<li>There should be no space beween items.</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
</li>
<li><p class="first">There should be no space beween items.</p>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
</dd>
<dt>l2</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
</div>
<div class="section" id="simple-nested-lists">
<h1>Simple nested lists</h1>
<ul class="simple">
<li>This list is simple</li>
<li><ul class="first">
<li>There should be no space beween items.</li>
</ul>
</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
</li>
<li><ul class="first simple">
<li>There should be no space beween items.</li>
<li>There should be no space beween items.</li>
</ul>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
</dd>
<dt>l2</dt>
<dd><ul class="simple">
<li>There should be no space beween items.</li>
</ul>
</dd>
</dl>
<ul class="simple">
<li>This list is simple</li>
<li><ol class="first arabic">
<li>There should be no space beween items.</li>
</ol>
</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
</li>
<li><ol class="first arabic simple">
<li><p class="first">There should be no space beween items.</p>
</li>
</ol>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
</dd>
<dt>l2</dt>
<dd><ol class="arabic simple">
<li><p class="first">There should be no space beween items.</p>
</li>
</ol>
</dd>
</dl>
<ul class="simple">
<li>This list is simple</li>
<li><dl class="first field-list simple">
<dt>11</dt>
<dd>There should be no space beween items.</dd>
</dl>
</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
</li>
<li><dl class="first field-list simple">
<dt>11</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
</dd>
<dt>l2</dt>
<dd><dl class="field-list simple">
<dt>11</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
</dd>
</dl>
<div class="section" id="combined-paragraph-and-list-in-a-list-item">
<h2>Combined paragraph and list in a list item</h2>
<ul class="simple">
<li>This list is simple<ol class="arabic">
<li>Enumeration in first item</li>
<li>second enumeration item</li>
</ol>
</li>
<li>There should be no space beween items.</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
<ol class="arabic simple">
<li><p class="first">Enumeration in first item</p>
</li>
<li><p class="first">second enumeration item</p>
</li>
</ol>
</li>
<li><p class="first">There should be no space beween items.</p>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
<ol class="arabic simple">
<li><p class="first">Enumeration in first item</p>
</li>
<li><p class="first">second enumeration item</p>
</li>
</ol>
</dd>
<dt>l2</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
<ul class="simple">
<li>This list is simple<ul>
<li>Bullet list in first item</li>
<li>Bullet list in first item</li>
</ul>
</li>
<li>There should be no space beween items.</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
<ul class="simple">
<li>Bullet list in first item</li>
<li>Bullet list in first item</li>
</ul>
</li>
<li><p class="first">There should be no space beween items.</p>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
<ul class="simple">
<li>Bullet list in first item</li>
<li>Bullet list in first item</li>
</ul>
</dd>
<dt>l2</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
<ul class="simple">
<li>This list is simple<dl class="field-list simple">
<dt>11</dt>
<dd>this item contains a field list.</dd>
<dt>12</dt>
<dd>this item contains a field list.</dd>
</dl>
</li>
<li>there should be no space beween items.</li>
</ul>
<ol class="arabic simple">
<li><p class="first">This list is simple</p>
<dl class="field-list simple">
<dt>11</dt>
<dd><p>this item contains a field list.</p>
</dd>
<dt>12</dt>
<dd><p>this item contains a field list.</p>
</dd>
</dl>
</li>
<li><p class="first">there should be no space beween items.</p>
</li>
</ol>
<dl class="field-list simple">
<dt>l1</dt>
<dd><p>This list is simple</p>
<dl class="field-list simple">
<dt>11</dt>
<dd><p>this item contains a field list.</p>
</dd>
</dl>
</dd>
<dt>l2</dt>
<dd><p>There should be no space beween items.</p>
</dd>
</dl>
</div>
<div class="section" id="complex-lists">
<h2>Complex lists</h2>
<ul>
<li><p class="first">This list is not simple</p>
</li>
<li><p class="first">Watch the space beween items</p>
<p>It is caused by this paragraph</p>
</li>
</ul>
<ol class="arabic">
<li><p class="first">This list is not simple</p>
</li>
<li><p class="first">Watch the space beween items</p>
<p>It is caused by this paragraph</p>
</li>
</ol>
<dl class="field-list">
<dt>l1</dt>
<dd><p>This list is not simple</p>
</dd>
<dt>l2</dt>
<dd><p>Watch the space beween items</p>
<p>It is caused by this paragraph</p>
</dd>
</dl>
<ul>
<li><p class="first">This list is not simple</p>
<p>second paragraph in first item</p>
</li>
<li><p class="first">Watch the space beween items.</p>
</li>
</ul>
<ol class="arabic">
<li><p class="first">This list is not simple</p>
<p>second paragraph in first item</p>
</li>
<li><p class="first">Watch the space beween items.</p>
</li>
</ol>
<dl class="field-list">
<dt>l1</dt>
<dd><p>This list is not simple</p>
<p>second paragraph in first item</p>
</dd>
<dt>l2</dt>
<dd><p>Watch the space beween items.</p>
</dd>
</dl>
<ul>
<li><p class="first">This list is not simple</p>
</li>
<li><ul class="first simple">
<li>Watch the space beween items</li>
</ul>
<p>It is caused by this paragraph</p>
</li>
</ul>
<ol class="arabic">
<li><p class="first">This list is not simple</p>
</li>
<li><ul class="first simple">
<li>Watch the space beween items</li>
</ul>
<p>It is caused by this paragraph</p>
</li>
</ol>
<dl class="field-list">
<dt>l1</dt>
<dd><p>This list is not simple</p>
</dd>
<dt>l2</dt>
<dd><ul class="simple">
<li>Watch the space beween items</li>
<li>Watch the space beween items</li>
</ul>
<p>It is caused by this paragraph</p>
</dd>
<dt>l1</dt>
<dd><p>This list is not simple</p>
</dd>
<dt>l2</dt>
<dd><ol class="arabic simple">
<li><p class="first">Watch the space beween items</p>
</li>
<li><p class="first">Watch the space beween items</p>
</li>
</ol>
<p>It is caused by this paragraph</p>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
